{extend name="./app/admin/view/main.html" /}

{block name="title"}内容智能迁入 - 添加规则 - {__block__}{/block}

{block name="style"}
{__block__}

<style type="text/css">
         
    .sortable-chosen {
        background-color: #d9effd;
    }
    .sortable-ghost {
        background-color: #eef2f6;
    }
    .url-group-box {
        width:100%;
        height:250px;
        overflow-x: scroll;
        overflow-y: hidden;
        white-space:nowrap;
    }
    .url-group {
        width:260px;
        height:240px;
        float:left;
    }
    .url-group ul {
        height: 200px;
        overflow: hidden;
        overflow-y: scroll;
    }
    .url-group ul li {
        padding: 2px 5px;
        display:block;
    }
    .url-group a {
        overflow: hidden;
        text-overflow: ellipsis;
        display:block;
        
    }
    .view-page-content {
        height:400px;
        overflow: hidden;
        overflow-y: scroll;
        
    }
     .ivu-position{
     position: absolute;
    left: 310px;
    bottom: 0px;
 }
</style>

{/block}
{block name="main"}
<header class="nicemip-container-header">
    <div class="float-left header-group">
        <h4 class="title">内容智能迁入规则</h4>
        <h5 class="sub-title"><a href="{$domain}/{$Think.config.admin}/addons/autocontentincome/AdminAutoContentIncome/autoContentIncome">全部规则</a> <i class="ion-chevron-right"></i> 添加规则</h5>
    </div>
</header>

<main class="nicemip-container-body" style="height: calc(100% - 50px)">
    <section class="nice-box">
        <div class="nice-box-body row">
            <h5 class="col-md-3">1.填写迁入点</h5>
            <h5 class="col-md-3">2.确认迁入内容</h5>
            <h5 class="col-md-3">3.预览迁入数据</h5>
            <h5 class="col-md-3">4.设置分类，开始执行</h5>
        </div>
    </section>
    
    <i-form label-position="top">
        <section class="nice-box" id="step1">
        <section class="nice-box-heading"><h3>1 填写迁入点</h3></section>
            <div class="nice-box-body">
                <div class="row">
                    <div class="col-md-6">
                        <Form-Item label="请填写迁入内容所在的列表页">
                            <i-input v-model="res.url" v-on:keyup.enter="step2" placeholder="http://">
                                <i-Button slot="append" @click="doStep1">抓取分析</i-Button>
                            </i-input>
                        </Form-Item>
                        <Form-Item v-if="res1.status">
                            <div :style="res1.tips_style" v-html="res1.tips"></div>
                        </Form-Item>
                    </div>
                    <div class="col-md-6">
                            <Form-Item label="备注说明：">填写的地址最好是某个类目下的列表页，迁入数据后无需再调整文章分类。</Form-Item>
        
                    </div>
                </div>
            </div>
        </section>
        <section class="nice-box" v-if="res2.status" id="step2">
            <section class="nice-box-heading"><h3>2.1 确认迁入内容</h3></section>
            <div class="nice-box-body">
                <div class="row">
                    <div class="col-md-12">
                        <Form-Item label="以下哪些是需要迁入的内容？">
                            <div class="url-group-box">
                                <div :style="res2.list_group_style">
                                    <div class="url-group list-group" v-for="(group, index) in res.data.groups" :id="'list_group_' + index">
                                        <input type="checkbox" :value="index" v-model="res.list_keys">
                                        <ul>
                                            <li v-for="item in group.result"><a target="blank" :href="item.url" :title="item.text">{{item.text}}</a></li>
                                        </ul>
                                    </div>
                                </div>
                            </div>
                        </Form-Item>
                    
                        <button type="button" class="ivu-btn ivu-btn-primary ivu-btn-circle" @click="step2_2">
                            <span>确认</span>
                        </button>
                    </div>
                </div>
            </div>
        </section>
        <section class="nice-box" v-if="res2.status == 2" id="step2_2">
            <section class="nice-box-heading"><h3>2.2 确认分页页码</h3></section>
            <div class="nice-box-body">
                <div class="row">
                    <div class="col-md-12">
                        <Form-Item label="以下哪组是分页页码？" v-if="res.data.groups2">
                            <div class="url-group-box">
                                <div :style="res2.page_group_style">
                                    <div class="url-group page-group" v-for="(group, index) in res.data.groups2" :id="'page_group_' + index">
                                        <input type="radio" :value="index" v-model="res.page_key">
                                        <ul>
                                            <li v-for="item in group.result"><a target="blank" :href="item.url" :title="item.text">{{item.text}}</a></li>
                                        </ul>
                                    </div>
                                </div>
                            </div>
                        </Form-Item>
                        <Form-Item v-else>
                            <div style="color:gray">无分组链接可选</div>
                        </Form-Item>
                        
                        <button type="button" class="ivu-btn ivu-btn-primary ivu-btn-circle" @click="step3">
                            <span>{{res2.btn2_text}}</span>
                        </button>
                    </div>
                </div>
            </div>
        </section>
        <section class="nice-box" v-if="res3.status" id="step3">
            <section class="nice-box-heading"><h3>3 预览迁入数据</h3></section>
            <div class="nice-box-body">
                <div class="row">
                    <div class="col-md-12">
                        <Form-Item label="预览智能提取的内容">
                            <select v-model="res3.view_page_selected" @change="viewPage">
                                <option v-for="(option,index) in res.list_links" :value="index">
                                  {{option.text}}
                                </option>
                            </select>
                        </Form-Item>
                        
                        <Form-Item label="抓取的页面内容：">
                            <div class="view-page-content" v-html="res3.view_page_content"></div>
                        </Form-Item>
                        
                        <button type="button" class="ivu-btn ivu-btn-primary ivu-btn-circle" @click="step4">
                            <span>跳过</span>
                        </button>
                    </div>
                </div>
            </div>
        </section>
        <section class="nice-box" v-if="res3.status"  id="step4">
            <section class="nice-box-heading"><h3>4 设置分类，开始执行</h3></section>
            <div class="nice-box-body">
                <div class="row">
                    <div class="col-md-12">
                        <Form-Item label="请选择内容所属的分类">
                            <Cascader :data="res3.articleCategoryList" transfer v-model="res.cid"  style="width: 300px;"></Cascader>
                            <button type="button" class="ivu-btn ivu-btn-primary ivu-btn-circle ivu-position"  @click='newAdd' >
								            <span><Icon type="plus-round"></Icon> 添加分类</span>
							</button>
                        </Form-Item>
                        
                        <button type="button" class="ivu-btn ivu-btn-circle" @click="doStep4(0)">
                            <span>保存</span>
                        </button>
                        <button type="button" class="ivu-btn ivu-btn-primary ivu-btn-circle" @click="doStep4(1)">
                            <span>保存，并执行内容迁入</span>
                        </button>
                    </div>
                </div>
            </div>
        </section>
    </i-form>
    
    <Modal  v-model="category.dialogCategory" size="large" v-cloak width='1000' :mask-closable="false">
        <i-form :model="category" :rules="category.categoryRules" ref="category" :label-width="80">
            <Tabs :animated='false' v-model="itemTabsValue">
                <Tab-Pane label="基础信息" name='default'>
                    <Form-Item label="分类" prop="title">
                        <i-Select v-model="category.pid" transfer style="width:200px" :disabled='category.categoryStatus && category.pid == 0 && category.isChild'>
                            <i-Option v-for="item in category.categoryList" :disabled="item.disabled" :value="item.id" :key="item.id">{{ item.name }}</i-Option>
                        </i-Select>
                    </Form-Item> 
                    <Form-Item label="分类名称" prop="name">
                        <i-input v-model="category.name" placeholder="例：网站优化"></i-input>
                    </Form-Item>
                    <Form-Item label="URL别名" prop="url_name">
                        <i-input placeholder="例：seo" v-model="category.url_name"><i-Button slot="append" class="tags-btn" @click='getPinyin'>获取拼音</i-Button></i-input>
                    </Form-Item>
                    <form-item label="自定义标题">
                        <i-input placeholder="例：自定义分类标题" v-model="category.seo_title"></i-input>
                    </Form-Item>
                    <Form-Item label="关键词">
                        <i-input type="textarea" v-model="category.keywords" placeholder="例：SEO,SEO优化,搜索引擎优化,网站排名"></i-input>
                    </Form-Item>
                    <Form-Item label="描述">
                        <i-input type="textarea" v-model="category.description" placeholder="请输入description描述信息"></i-input>
                    </Form-Item>
                </Tab-Pane>
               
            </Tabs>
            </i-form>
            <div slot="footer" class="dialog-footer">
                <i-button >取 消</i-button>
                <i-button type="primary" @click="categoryPost('category',category)">确 定</i-button>
            </div>
        </Modal>
</main>
</div>
{/block}
{block name="javascript"}
{__block__}
<script>
    new Vue({
        el: '#app',
        data:{
            res: {
                url: '',
                cid: 0,
                list_keys: [],
                page_key: '',
                list_links: [],
                page_links: [],
                data: {},
            },
            res1: {
                status : false,
                tips_style:'color:gray',
                tips: '请求列表页，链接提取中...'
            },
            res2: {
                status : false,
                list_group_style: '',
                page_group_style: '',
                btn2_text: '确定',
            },
            res3: {
                status : false,
                view_page_selected: '',
                view_page_content: '页面内容提取分析中...',
                articleCategoryList: [],
            },
            category: {
                categoryList: [],
                dialogCategory: false,
                dialogCategoryTitle: '',
                isChild: false,
                id: '',
                pid: 0,
                name: '',
                url_name: '',
                seo_title: '',
                description: '',
                keywords: '',
                template: '{$itemUrl}.html',
                detail_template: '{$itemUrl}Detail.html',
                category_url: '/{$itemUrl}/<url_name>/',
                category_page_url: '<category_url>index_<page>.html',
                detail_url: '/{$itemUrl}/<id>.html',
                categoryRules: {
                    name: [{
                        required: true,
                        message: '请输入名称',
                        trigger: 'blur'
                    }],
                    url_name: [{
                        required: true,
                        message: '请输入别名',
                        trigger: 'blur'
                    }],
                },
                categoryStatus: false,
                categoryListEdit: [],
            },
            itemTabsValue: 'default',
            tempCategoryList: [],
        },
        mounted: function() {
            _this = this;
            this.getCategoryList();
        },
        methods:{
            doStep1: function () {
                this.res1.status = 'doing';
                this.list_keys  = [];
                this.page_key   = '';
                this.list_links = [];
                this.page_links = [];
                this.data       = {};
                this.res2.status = false;
                this.res3.status = false;
                
                this.res1.tips_style = 'color:gray';
                this.res1.tips = '请求列表页，链接提取分析中...';
                this.$nicemip.ajax('{$domain}/{$Think.config.admin}/ApiAdminACI/autoContentIncomeStep1',{
                    url: this.res.url,
                }).then(function (res) {
                    _this.res.data = res.data;
                    _this.res.list_keys = [];
                    _this.res.page_key  = '';
                    
                    if (res.code == 1) {
                        _this.res.url = res.data.url;
                        if (res.data.count > 0) {
                            _this.res1.status = 'ok';
                            _this.res1.tips_style = 'color:green';
                            _this.res1.tips = '从列表页中共提取了 <b>'+res.data.count+'</b> 条链接';
                        } else {
                            _this.res1.status = 'fail';
                            _this.res1.tips_style = 'color:red';
                            _this.res1.tips = '列表页未识别到链接存在';
                        }
                        
                        for (var key in res.data.groups) {
                            for (var k in res.data.groups[key].type) {
                                if (res.data.groups[key].type[k] == 'list') {
                                    _this.res.list_keys.push(key);
                                } else if (_this.res.page_key === '' && res.data.groups[key].type[k] == 'page') {
                                    _this.res.page_key      = key;
                                }
                            }
                        }
                    } else {
                        _this.res1.status = 'fail';
                        _this.res1.tips_style = 'color:red';
                        _this.res1.tips = res.msg;
                    }
                    
                    if (_this.res1.status == 'ok') {
                        _this.res2.status = 'ok';
                        _this.res3.status = false;
                        _this.res2.list_group_style = 'width:'+(_this.res.data.groups.length * 260) + 'px';
                        
                        $('.list-group').show();
                        _this.scrollBottom('step2');
                    }
                });
                
            },
            step2_2: function() {
                if (this.res.list_keys.length == 0) {
                    this.$Message.error('请确认列表链接');
                    return false;
                }
                this.res3.status = false;
                
                $('.list-group').hide();
                for (var k in this.res.list_keys) {
                    $('#list_group_' + this.res.list_keys[k]).show();
                }
                this.res.list_group_style = 'width:'+(this.res.list_keys.length * 260) + 'px';
                
                var list_keys   = [];
                for (var i in this.res.list_keys) {
                    list_keys.push(parseInt(this.res.list_keys[i]));
                }
                
                this.res.data.groups2    = null;
                for (var k in this.res.data.groups) {
                    if (-1 !== $.inArray(parseInt(k), list_keys)) {
                        continue;
                    }
                    if (this.res.data.groups2 === null) {
                        this.res.data.groups2 = {};
                        this.res.data.groups2_count = 1;
                    }
                    this.res.data.groups2[k] = this.res.data.groups[k];
                    this.res.data.groups2_count ++;
                }
                
                this.res2.status = 2;
                if (this.res.data.groups2 !== null) {
                    this.res2.page_group_style = 'width:'+(this.res.data.groups2_count * 260) + 'px';
                    if (this.res.page_key !== '') {
                        if (-1 !== $.inArray(this.res.page_key, list_keys)) {
                            this.res.page_key   = '';
                        }
                    }
                    
                    this.btn2_text = '确定';
                } else {
                    this.btn2_text = '跳过';
                }

                $('.page-group').show();
                this.scrollBottom('step2_2');
            },
            step3: function () {
                $('.page-group').hide();
                $('#page_group_' + this.res.page_key).show();
                this.res2.page_group_style = 'width:260px';
                
                this.res3.status = true;
                this.getArticleCategoryList();
                
                this.res.page_links = this.res.data.groups[this.res.page_key];
                this.res.list_links = [];
                for (var i in this.res.list_keys) {
                    if (this.res.list_links.length == 0) {
                        this.res.list_links = this.res.data.groups[this.res.list_keys[i]].result;
                    } else {
                        for (var key in this.res.data.groups[this.res.list_keys[i]].result) {
                            this.res.list_links.push(this.res.data.groups[this.res.list_keys[i]].result[key]);
                        }
                    }
                }
                
                for (var key in this.res.list_links) {
                    this.res3.view_page_selected = key;
                    this.viewPage();
                    break;
                }
                
                this.scrollBottom('step3');
            },
            viewPage: function () {
                if (this.res3.view_page_selected === '') {
                    this.$Message.error('请选择要预览的页面');
                    return false;
                }
                selected    = this.res.list_links[this.res3.view_page_selected];
                this.res3.view_page_content = '页面内容提取分析中...';
                this.$nicemip.ajax('{$domain}/{$Think.config.admin}/ApiAdminACI/autoContentIncomeStep3',{
                    url: /* this.res.data.domain +  */selected.url,
                    title: selected.text,
                }).then(function (res) {
                    _this.res3.status = true;
                    if (res.code == 1) {
                        _this.res3.view_page_content = res.data.content;
                    }
                });
            },
            getArticleCategoryList: function() {
                this.$nicemip.ajax('{$domain}/article/ApiAdminArticle/categoryList', {
                    
                }).then(function (res) {
                    if(res.code == 1) {
                        _this.res3.articleCategoryList = res.data.categoryList;
                    }
                });
            },
            step4: function () {
                this.scrollBottom('step4');
            },
            doStep4: function(need_exe) {
                if (!this.res.cid || !this.res.cid[0]) {
                    this.$Message.error('请选择分类');
                    return false;
                }
                
                var list_links  = [];
                for (var i in this.res.list_keys) {
                    list_links.push(this.res.data.groups[this.res.list_keys[i]].result);
                }
                
                this.$nicemip.ajax('{$domain}/{$Think.config.admin}/ApiAdminACI/autoContentIncomeStep4',{
                    need_exe: need_exe,
                    cid: this.res.cid[0],
                    url: this.res.url,
                    auto_rule: {
                        list_links: list_links,
                        page_links: [this.res.data.groups[this.res.page_key].result]
                    }
                }).then(function (res) {
                    if(res.code == 1) {
                        _this.$Message.success(res.msg);
                        setTimeout(function() {
                            window.location.href = '{$domain}/{$Think.config.admin}/addons/autocontentincome/AdminAutoContentIncome/autoContentIncome';
                        }, 500);
                    } else {
                        _this.$Message.error(res.msg);
                    }
                });
            },
            scrollBottom(hash) {
                setTimeout(function() {
                    window.location.hash    = '#'+hash;
                }, 400);
            },
          //采集添加分类
            getPinyin: function() {
                  if (!this.category.name) {
                      this.$Message.error('请输入名称');
                      return false;
                  }
                  this.$nicemip.ajax('{$domain}/{$Think.config.admin}/ApiAdminMipPost/getPinyin', {
                      words: this.category.name,
                  }).then(res => {
                      if(res.code == 1) {
                          this.category.url_name = res.data;
                      }
                  });
              },
              newAdd: function() {
                  this.category.categoryStatus = false;
                  this.category.isChild = false;
                  this.itemTabsValue = 'default';
                  this.category.pid = 0,
                  this.category.name = '';
                  this.category.url_name = '';
                  this.category.seo_title = '';
                  this.category.template = '{$itemUrl}.html';
                  this.category.detail_template = '{$itemUrl}Detail.html';
                  this.category.category_url = '/{$itemUrl}/<url_name>/';
                  this.category.category_page_url = '<category_url>index_<page>.html';
                  this.category.detail_url = '/{$itemUrl}/<id>.html';
                  this.category.description = '';
                  this.category.keywords = '';
                  this.category.id = '';
                  this.category.dialogCategory = true;
                  this.category.dialogCategoryTitle = '添加分类';
              },
              categoryPost(val, param) {
              	if (!this.category.url_name) {
                      this.$Message.error('请输入基础信息中的必填项');
                      return false;
              	}
              	if (!this.category.name) {
                      this.$Message.error('请输入基础信息中的必填项');
                      return false;
              	}
                  this.$refs[val].validate((valid) => {
                      if(valid) {
                          var parent=/^[a-zA-Z0-9_-]+$/;
                          if (!parent.test(this.category.url_name)) {
                              this.$Message.error('别名输入值不支持');
                              return false;
                          }
                          if(this.category.categoryStatus == false) {
                              this.$nicemip.ajax('{$domain}/article/ApiAdminArticle/categoryAdd', {
                                  pid: this.category.pid,
                                  name: this.category.name,
                                  url_name: this.category.url_name,
                                  seo_title: this.category.seo_title,
                                  template: this.category.template,
                                  detail_template: this.category.detail_template,
                                  category_url: this.category.category_url,
                                  category_page_url: this.category.category_page_url,
                                  detail_url: this.category.detail_url,
                                  description: this.category.description,
                                  keywords: this.category.keywords,
                              }).then(res => {
                                  if(res.code == 1) {
                                      this.category.dialogCategory = false;
                                      this.$Message.success(res.msg);
                                      this.getArticleCategoryList();
                                  }
                              });
                          }
                      }
                  });
              },
              getCategoryList: function() {
                  this.$nicemip.ajax('{$domain}/article/ApiAdminArticle/categoryList', {
                  }).then(res => {
                      if(res.code == 1) {
                          var categoryList = res.data.categoryList;
                          for (var i = 0; i < categoryList.length; i++) {
                              categoryList[i].isOpen = false;
                          }
                          for (var i = 0; i < categoryList.length; i++) {
                              if (this.tempCategoryList.length) {
                                  for (var j = 0; j < this.tempCategoryList.length; j++) {
                                  	   if (this.tempCategoryList[j].id == categoryList[i].id) {
                                          categoryList[i].isOpen = this.tempCategoryList[j].isOpen;
                                  	   }
                                  }
                              }
                          }
                          this.categoryList = categoryList;
                          
                          var tempCategoryList = [{id:0,pid: 0,name:'顶层分类'}];
                          for (var i = 0; i < categoryList.length; i++) {
                              categoryList[i].disabled = false;
                              if (categoryList[i].pid == 0) {
                                  tempCategoryList.push(categoryList[i]);
                              }
                          }
                          this.category.categoryList = tempCategoryList; 
                      }
                  });
              },
        }
    })
</script>
{/block}